<template>
	<view>
		<view></view>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	import {
		countCorrectPersonInfo
	} from '@/common/api/approve/home/home_api.js'
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				sun: null
			}
		},
		computed: {
			...mapGetters(['APPROVE_DEPT', 'getParentid'])
		},
		async mounted() {
			this.getcountCorrectPersonInfo()
		},
		beforeDestroy() {
			if (this.chart) {
				this.chart.dispose();
			}
		},
		methods: {
			async getcountCorrectPersonInfo() {
				const res = await countCorrectPersonInfo(this.getParentid)
				const arr = res.data.map(item => {
					return {
						key: item.key,
						name: item.name,
						value: item.count,
					}
				})
				const total = arr.find(item => item.key == "personTotal")
				const data = arr.filter(item => item.key != "countTypeFocus" && item.key != "personTotal")
				console.log(data);
				this.sum = total.value
				this.$emit('definitionEvent', data)
				this.initChart(data);
			},
			initChart(data) {
				var proDom = document.getElementById('overViewEcharts')
				if (proDom) {
					this.chart = echarts.init(overViewEcharts);
					// 配置图表选项并设置到图表实例上  
				} else {
					console.error('图表容器不存在，无法初始化ECharts');
					return
				}
				this.chart.setOption({
					title: {
						text: '社矫对象',
						textStyle: {
							fontSize: 18,
							fontWeight: "normal",
							color: "#000"
						},
						subtext: '{value|' + this.sum + '}{unit| 人}',
						subtextStyle: {
							rich: {
								value: {
									fontSize: 16,
									fontWeight: "bold",
									color: "#000"
								},
								unit: {
									fontSize: 12,
									fontWeight: "normal",
									color: "#999"
								}
							}
						},
						top: '35%',
						left: 'center'
					},
					legend: {
						type: "plain",
						show: true,
						bottom: "15%",
						// left: 'center',
						itemGap: 20,
						itemWidth: 10,
						itemHeight: 10,
						textStyle: {
							family: 'Arial',
							fontSize: 13,
							color: '#bdbdbd',
						},
						// formatter: function(name) {
						// 	let item = series[0].data
						// 	for (var i = 0; i < item.length; i++) {
						// 		if (item[i].name === name) {
						// 			return name + '\n' + series[0].data[i].value;
						// 		}
						// 	}
						// },
					},
					series: [{
						name: 'overViewEcharts',
						type: 'pie',
						radius: ['48%', '56%'],
						bottom: "10%",
						avoidLabelOverlap: false,
						// legendHoverLink: true,
						padAngle: -5,
						// itemStyle: {
						// 	borderRadius: 50
						// },
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: data,
						color: ['#CF3730 ', '#FF9F00 ', '#3496FB', '#00B853'],
					}],
				})
			},
		}
	}
</script>

<style>

</style>